<template>
    <div class="tag-wall">
        <div class="tag-cloud" ref="wrapper" @mouseenter="stopRotate" @mouseleave="startRotate">
            <p v-for="(item, index) in data" :key="index" ref="tag" @click="handleTagHover(index)"
                @mouseleave="handleTagLeave" :class="{ 'tag-dimmed': hoveredIndex !== null && hoveredIndex !== index }"
                :style="{ color: colorList[index] }">
                {{ item.name }}
            </p>

        </div>
    </div>
</template>
<script setup>
import { ref, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
import { getTagsApi } from '@/api/tags'

const data = ref([])
const options = ref({
    radius: 140, // 滚动半径，单位px
    maxFont: 24, // 最大字体大小
    color: null, // 字体颜色。为空时随机
    rotateAngleXbase: 600, // 默认旋转速度基数，数越小速度越快
    rotateAngleYbase: 600,
})
const tagList = ref([])
const colorList = ref([])
const isRotating = ref(true)
const hoveredIndex = ref(null)
const tag = ref([]);
const wrapper = ref(null);
const _initTags = () => {
    const { rotateAngleXbase, rotateAngleYbase, radius } = options.value;
    const length = data.value.length;
    for (let i = 0; i < length; i++) {
        let angleX = Math.acos((2 * (i + 1) - 1) / length - 1);
        let angleY = angleX * Math.sqrt(length * Math.PI);
        const x = radius * Math.sin(angleX) * Math.cos(angleY);
        const y = radius * Math.sin(angleX) * Math.sin(angleY);
        const z = radius * Math.cos(angleX);
        const color = options.value.color || `rgb(${Math.round(255 * Math.random())},${Math.round(255 * Math.random())},${Math.round(255 * Math.random())})`;
        colorList.value.push(color)
        const tagItem = {
            x,
            y,
            z,
            ele: tag.value[i],
        };
        tagList.value.push(tagItem);
    }
    console.log("tt",data.value)
    startRotate();
};

const setPosition = (tag, r, maxFont) => {
    if (wrapper.value) {
        tag.ele.style.transform = `translate(${tag.x + wrapper.value.offsetWidth / 2 - tag.ele.offsetWidth / 2}px,${tag.y + wrapper.value.offsetHeight / 2 - tag.ele.offsetHeight / 2}px)`;
        tag.ele.style.opacity = tag.z / r / 2 + 0.7;
        tag.ele.style.fontSize = (tag.z / r / 2 + 0.5) * maxFont + 'px';
    }
};

const rotateX = (tag) => {
    const { rotateAngleXbase } = options.value;
    const rotateAngleX = Math.PI / rotateAngleXbase;
    const cos = Math.cos(rotateAngleX);
    const sin = Math.sin(rotateAngleX);
    let y1 = tag.y * cos - tag.z * sin;
    let z1 = tag.y * sin + tag.z * cos;
    tag.y = y1;
    tag.z = z1;
};

const rotateY = (tag) => {
    const { rotateAngleYbase } = options.value;
    const rotateAngleY = Math.PI / rotateAngleYbase;
    const cos = Math.cos(rotateAngleY);
    const sin = Math.sin(rotateAngleY);
    let x1 = tag.z * sin + tag.x * cos;
    let z1 = tag.z * cos - tag.x * sin;
    tag.x = x1;
    tag.z = z1;
};

const clickTag = (item) => {
    // 这里假设已经引入了router，在实际使用中根据具体路由库调整
    const router = useRouter();
    router.push({
        path: '/tags',
        query: {
            tagId: item.id,
            tagName: item.name
        }
    });
};

const stopRotate = () => {
    isRotating.value = false;
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
};

let timer = null;
const startRotate = () => {
    if (timer) {
        return;
    }
    isRotating.value = true;
    timer = setInterval(() => {
        if (!isRotating.value) {
            clearInterval(timer);
            timer = null;
            return;
        }
        for (let i = 0; i < tagList.value.length; i++) {
            rotateX(tagList.value[i]);
            rotateY(tagList.value[i]);
            setPosition(tagList.value[i], options.value.radius, options.value.maxFont);
        }
    }, 20);
};

const handleTagHover = (index) => {
    hoveredIndex.value = index;
};

const handleTagLeave = () => {
    hoveredIndex.value = null;
};
watch(data, () => {
    nextTick(() => {
        _initTags();
    });
});

onBeforeUnmount(() => {
    if (timer.value) {
        clearInterval(timer.value);
        timer.value = null;
    }
})

onMounted(() => {
    _initTags();
    getTagsApi().then(res => {
        data.value = res.data
    })
    // nextTick(()=>{})
   
})


</script>

<style lang="scss" scoped>
.tag-cloud {
    width: 300px;
    height: 300px;
    position: relative;
    color: #333;
    margin: 0 auto;
    text-align: center;
    cursor: default;
}

.tag-cloud p {
    position: absolute;
    top: 0px;
    left: 0px;
    color: #333;
    font-family: Arial;
    text-decoration: none;
    margin: 0 10px 15px 0;
    line-height: 18px;
    text-align: center;
    font-size: 16px;
    padding: 4px 9px;
    display: inline-block;
    border-radius: 3px;
    transition: opacity 0.3s ease;
}

.tag-cloud p:hover {
    cursor: pointer;
}

.tag-dimmed {
    opacity: 0.05 !important;
}
</style>